<template>
	<view class="aplipay-result-page" v-if="isLoad">
		<view v-if="isWechatAgent">
			<view class="text-section">
				<view>点击复制网址去浏览器中打开</view>
				<view class="pl-lg pr-lg mt-sm ml-lg mr-lg f-paragraph c-desc ellipsis">{{ link }}</view>
			</view>
			<view class="button-section">
				<button class="button copy" @click="toCopyLink">点击复制</button>
				<button class="button off" @click="goDetail" v-if="isHaveLink">完成支付</button>
			</view>
		</view>
		<view v-else>
			<view class="text-section">
				<view>{{ content }}</view>
			</view>
			<view class="alipaysubmit" v-html="alipayOrderParams.orderInfo"></view>
		</view>

		<uni-popup ref="show_oper_item" type="top" :maskClick="false">
			<view class="pupup-oper-item">
				<view @tap.stop="$refs.show_oper_item.close();isHaveLink=true"
					class="close-btn fill-base flex-center mt-lg ml-lg f-paragraph c-title abs radius">
					跳过引导</view>
				<view class="flex-between" style="padding:0 92rpx;">
					<view></view>
					<image class="jiantou-img" :src="`https://api.huixuananmm.com/admin/anmo/alipay/jiantou.png`"></image>
				</view>
				<view class="oper-rule f-mini-title c-title rel">
					<image class="bg-img abs" :src="`https://api.huixuananmm.com/admin/anmo/alipay/bg.png`"></image>
					<image class="bg-icon abs" :src="`https://api.huixuananmm.com/admin/anmo/alipay/bg-icon.png`"></image>
					<view class="rel" style="z-index: 2;">
						<view class="flex-y-center" style="margin: 30rpx 0;">
							<view class="num flex-center mr-md f-sm-title c-base radius">1</view>
							点击右上角“<view class="dot"></view>
							<view class="dot md"></view>
							<view class="dot"></view>”按钮
						</view>
						<view class="flex-y-center">
							<view class="num flex-center mr-md f-sm-title c-base radius">2</view>
							选择“<image class="map-img" :src="`https://api.huixuananmm.com/admin/anmo/alipay/map.png`">
							</image>
							在浏览器中打开”
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	import siteInfo from '@/siteinfo.js';
	export default {
		components: {},
		data() {
			return {
				options: {},
				isLoad: false,
				isWechatAgent: false,
				isHaveLink: false,
				link: '',
				content: '正在支付中'
			}
		},
		onLoad(options) {
			let {
				aliptype = 0
			} = options
			options.aliptype = aliptype * 1
			this.options = options
			this.initIndex()
		},
		computed: mapState({
			alipayOrderParams: state => state.order.alipayOrderParams,
			mineInfo: state => state.user.mineInfo
		}),
		methods: {
			...mapActions(['getConfigInfo', 'getMineInfo']),
			...mapMutations(['updateUserItem', 'updateOrderItem']),
			async initIndex() {
				let isWechatAgent = await this.$jweixin.isWechat()
				this.isWechatAgent = isWechatAgent
				let {
					autograph
				} = this.options
				if (!isWechatAgent && autograph) {
					this.updateUserItem({
						key: 'autograph',
						val: autograph
					})
					await this.toRePay()
					return
				}
				await this.formatLink()
				this.isLoad = true
				if (!isWechatAgent) return
				this.$jweixin.showOptionMenu()
				setTimeout(() => {
					this.$refs.show_oper_item.open()
				}, 100)
			},
			initRefresh() {
				this.initIndex()
			},
			async formatLink() {
				let {
					siteroot
				} = siteInfo
				let url = siteroot.split('/index.php')[0]
				let {
					alipay_params = ''
				} = this.alipayOrderParams
				let link = `${url}/${this.portName}/#/user/pages/alipay-result${alipay_params}`
				this.link = link
			},
			async toRePay() {
				let {
					id = 0, // 订单再次支付ID
						aliptype = 0 // 订单类型：0服务/加钟订单；1升级订单；2用户储值；3申请分销-员付费；4代理-商充值；5会员折扣卡; 6储值折扣卡; 7组局搭子发布; 8组局搭子加入
				} = this.options
				aliptype = aliptype * 1

				let methodArr = {
					0: ['order', 'rePayOrder'],
					1: ['order', 'rePayUpOrder'],
					2: ['mine', 'rePayBalanceOrder'],
					3: ['mine', 'reApplyResellerOrder'],
					4: ['agent', 'rePayOrder'],
					5: ['memberdiscount', 'rePayOrder'],
					6: ['mine', 'rePayDiscountOrder'],
					7: ['partner', 'rePayOrder'],
					8: ['partner', 'rePayJoin']
				}

				let methodKey = methodArr[aliptype][0]
				let methodModel = methodArr[aliptype][1]
				let param = {
					id
				}

				let {
					pay_list
				} = await this.$api[methodKey][methodModel](param)

				if (pay_list) {
					if (pay_list && typeof(pay_list) === 'object' && pay_list.id) {
						this.isLoad = true
						let {
							pay_info
						} = pay_list.expend
						window.location.href = pay_info
					} else {
						let alipayOrderParams = Object.assign({}, {
							orderInfo: pay_list,
							provider: 'alipay'
						}, this.options)
						this.updateOrderItem({
							key: 'alipayOrderParams',
							val: alipayOrderParams
						})
						this.isLoad = true
						this.$nextTick(() => {
							document.getElementById('alipaysubmit').submit();
						});
					}
				}
			},
			toCopyLink() {
				let {
					link: url
				} = this
				this.$util.goUrl({
					url,
					openType: 'copy'
				})
				this.isHaveLink = true
			},
			async goDetail() {
				let {
					page_url: url = ''
				} = this.alipayOrderParams
				if (url == 'is_fx') {
					await this.getMineInfo()
					let {
						is_fx
					} = this.mineInfo
					url = is_fx ? `/user/pages/distribution/income?paysuc=1` : `/pages/mine`
				}
				this.$util.goUrl({
					url,
					openType: url == 1 ? `navigateBack` : `reLaunch`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.aplipay-result-page {

		.alipaysubmit {
			display: none;
		}

		.text-section {
			padding-top: 148rpx;
			margin-top: 185rpx;
			background: url('') center top/280rpx 98rpx no-repeat;
			font-weight: bold;
			font-size: 32rpx;
			text-align: center;
			color: #111111;
		}

		.button-section {
			margin-top: 95rpx;
			margin-right: 98rpx;
			margin-left: 98rpx;

			.button {
				height: 80rpx;
				border-radius: 40rpx;
				font-size: 30rpx;
				line-height: 80rpx;

				~.button {
					margin-top: 32rpx;
				}

				&.copy {
					background-color: #333333;
					color: #ffffff;
				}

				&.off {
					border: 2rpx solid #999999;
					color: #666666;
				}
			}
		}

		.pupup-oper-item {

			.close-btn {
				top: 30rpx;
				left: 0;
				width: 148rpx;
				height: 56rpx;
			}

			.jiantou-img {
				width: 206rpx;
				height: 268rpx;
			}

			.oper-rule {
				width: 630rpx;
				height: 346rpx;
				padding: 80rpx 60rpx;
				margin: 0 auto;

				.bg-img {
					left: 0;
					top: 0;
					width: 630rpx;
					height: 346rpx;
				}

				.bg-icon {
					top: -56rpx;
					right: -24rpx;
					width: 174rpx;
					height: 166rpx;
				}

				.num {
					width: 45rpx;
					height: 45rpx;
					background: #000000;
				}

				.dot {
					width: 8rpx;
					height: 8rpx;
					background: #000000;
					border-radius: 50%;
					margin: 0 3rpx;
				}

				.dot.md {
					width: 12rpx;
					height: 12rpx;
				}

				.map-img {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}

	}
</style>